<template>
  <swiper
    :modules="modules"
    :slides-per-view="width > 640 ? 4 : 2"
    :freeMode="true"
    :space-between="50"
    loop
    :pagination="{ clickable: true }"
    v-bind="$attrs"
  >
    <swiper-slide v-for="(item, index) in items" :key="index">
      <div class="px-2 lt-sm:h-10 sm:h-20 w-full bg-gray-100">
        <div
          class="h-full w-full bg-no-repeat bg-contain bg-center p-4"
          :style="{
            'background-image': `url('${item}')`,
          }"
        ></div>
      </div>
    </swiper-slide>
    <!-- 分页器容器，必须加上 -->
  </swiper>
</template>
<script setup lang="ts">
import { Pagination, FreeMode } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";

const { width } = useWindowSize();

interface ItemsType {
  items: string[];
}

defineProps<ItemsType>();

const modules = ref([Pagination, FreeMode]);
</script>

<style>
.wiper-pagination .swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
}
</style>
